<template>
	<view>
		<!-- <view class="head"></view> -->
		<u-toast ref="uToast"></u-toast>
		<view class="root">
			<view class="backgroundpic">
				<image :src="user.avatar? user.avatar : '../../static/user.png'" mode="aspectFill">
				</image>
			</view>
			<view class="logo">
				<view class="logo-box">
					<image :src="user.avatar? user.avatar : '../../static/user.png' " mode="aspectFill">
					</image>
				</view>
				<text class="name">{{user.nickname}}</text>
			</view>
			<view class="info">
				<view class="info-box">
					<text class="box-title">获赞</text>
					<text>{{dataInfo[0] ? dataInfo[0] : 0}}</text>

				</view>
				<view class="info-box">
					<text class="box-title">获评</text>
					<text>{{dataInfo[2] ? dataInfo[2] : 0}}</text>
				</view>
				<view class="info-box">
					<text class="box-title">发帖</text>
					<text>{{dataInfo[1] ? dataInfo[1] : 0}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="group">
				<view class="list" @click="toHistory">
					<view class="title">
						<view class="icon t-icon t-icon-browser"></view>
						<text>浏览记录</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon t-icon t-icon-shijian"></view>
						<text>问诊记录</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list" @click="toMyorder">
					<view class="title">
						<view class="icon t-icon t-icon-dingdan"></view>
						<text>我的订单</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
			</view>
			<view class="group">
				<view class="list" @click="toMyPost">
					<view class="title">
						<view class="icon t-icon t-icon-fankui"></view>
						<text>我的发帖</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list" @click="toMyLike">
					<view class="title">
						<view class="icon t-icon t-icon-dianzan1"></view>
						<text>我的点赞</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
			</view>
			<view class="group">
				<view class="list" @click="toUserInfo">
					<view class="title">
						<view class="icon t-icon t-icon-zhiwen"></view>
						<text>个人资料</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon t-icon t-icon-saomiao2"></view>
						<text>数据分析</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list" @click="toAbout">
					<view class="title">
						<view class="icon t-icon t-icon-tuanti"></view>
						<text>关于我们</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
				<view class="list" @click="Quit">
					<view class="title">
						<view class="icon t-icon t-icon-kaiguan"></view>
						<text>退出登录</text>
					</view>
					<image src="../../static/image/arrow-right.png"></image>
				</view>
			</view>

		</view>
		<view class="bottom">
			<text>版权所有 © 健康守护者系统</text>
			<text>联系方式：2571607391@qq.com</text>
		</view>
	</view>

</template>

<script>
	import {
		GetStroage
	} from "@/utils/tool.js"
	import {
		getUserInfoNum,
		checkToken
	} from "@/api/user.js"
	export default {
		data() {
			return {
				user: {
					id: "",
					nickname: "游客",
					username: "",
					password: "",
					phone: "",
					mail: "",
					avatar: ""
				},
				msgList: {
					type: "success",
					message: "获取验证码成功"
				},
				dataInfo: [],

			};
		},
		onShow() { //页面加载,每进入页面就触发一次
			let result = GetStroage("userInfo");
			console.log("查找缓存", result);
			if (result) {
				this.user = result;
				this.getDataInfo(this.user.id);
			}
		},
		methods: {
			getDataInfo(index) {
				getUserInfoNum({
					uid: index
				}).then(res => {
					console.log("请求API接口【/user/getUserInfoNum】", res);
					this.dataInfo = res.data;
				})

			},
			toUserInfo() {
				//token验证
				let token = GetStroage("token") || this.$e.User.token;
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "/pages_user/userInfo/userInfo"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			toMyorder() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "/pages_shop/order/order"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			toMyPost() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "/pages_user/myPost/myPost"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			toMyLike() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "/pages_user/myLike/myLike"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			toHistory() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: '/pages_user/history/history'
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			toAbout() {
				uni.navigateTo({
					url: '/pages_user/about/about'
				})
			},
			Quit() {
				if (this.user.id == "") {
					this.fillMsg("error", "未登录,为您跳转登录页面");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				} else {
					uni.showModal({
						title: '提示',
						content: '您确定要离开吗?',
						success: (res) => {
							console.log("退出系统:", res);
							if (res.confirm) {
								uni.clearStorage();
								uni.reLaunch({
									url: "/pages/login/login"
								})
							}
						}
					})
				}

			}
		}

	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.head {
		width: 100%;
		height: 100rpx;
		background-color: #5288F5;
	}

	.root {
		padding: 80rpx 0 40rpx 0rpx;
		// padding-top: var(--status-bar-height); //避开小程序胶囊按钮
		position: relative; //相对定位

		/*
		绝对定位：看父元素，也就是看最近一级父元素是否设定了定位，如果没有就往上找，如果一直都没有，那么就会以浏览器的可视窗口作为参照进行偏移
		相对定位：是以自己为参照为，偏移量是看自己原来的位置作为偏移参照的
		*/
		//虚化背景
		.backgroundpic {
			position: absolute; //绝对定位【子绝父相】
			top: 0;
			left: 0; //撑开
			overflow: hidden; //防溢出【隐藏子元素溢出的部分】
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				filter: blur(1px); //模糊
				opacity: 0.5; //透明度
				transform: scale(1);
			}
		}

		.logo {
			display: flex;
			flex-direction: column;
			align-items: center;

			.logo-box {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden; //

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
				color: #1449CA;
			}
		}

		.info {
			margin: 5px 0;
			display: flex;

			.info-box {
				// text-shadow: 2px 2px red;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 30rpx;


				.box-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #000;
				}

				text {
					color: #353865;
				}
			}
		}

	}

	.content {
		margin: 30rpx 30rpx;
		// background-color: #ffffff;
		border-radius: 30rpx;
		transform: translateY(-70rpx);

		.group {
			border-radius: 30rpx;
			background-color: #ffffff;
			border-bottom: 10rpx solid #f4f4f4f4;
			box-shadow: 0 0 20rpx 20rpx rgba(247, 247, 250, 0.3);

			.list {
				display: flex;
				justify-content: space-between; //两边对齐
				align-items: center;
				padding: 15rpx 20rpx;
				margin-top: 15rpx; //加上撑的更大一点
				border-bottom: 1rpx solid #f4f4f4f4;
				font-size: 16px;


				.title {
					display: flex;
					align-items: center;

					.icon {
						padding: 5rpx;
					}

					text {
						font-size: 30rpx;
						padding-left: 10rpx;
					}
				}

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

		}
	}

	.bottom {
		width: 90%;
		margin: -50rpx auto;
		@include flex-box-set();
		flex-direction: column;
		color: $text-font-color-3;
	}
</style>
